/**
 * Created by xiangjiayu on 2017/6/26.
 * 订单详情
 */

import React from 'react';
import Immutable from 'immutable'
import {
    Button,
    Col,
    DatePicker,
    Icon,
    Input,
    Modal,
    Row,
    Select,
    Steps,
    Table,
    Tabs,
    Tag,
    Timeline,
    Tooltip
} from 'antd';
import MyIcon from '../../components/common/MyIcon/MyIcon'; //自定义字体图标
import ImageList from 'upload/ImageList'

const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const { MonthPicker, RangePicker } = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const TabPane = Tabs.TabPane;


export default class AuntInfo  extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            mode: 'left',
            //月嫂图片
            previewVisible: false,
            previewImage: '',
            fileList: [{
                uid: -1,
                name: '生活照',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            }, {
                uid: -2,
                name: '生活照',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            }],
            Modalpictrue:false, //图片展示
            Modalvideo:false, //视频展示
        }
    }
    showModalpictrue(Modalpictrue) {
        this.setState({ Modalpictrue });
    }
    showModalvideo(Modalvideo) {
        this.setState({ Modalvideo });
    }
    handleModeChange = (e) => {
        const mode = e.target.value;
        this.setState({ mode });
    }
    // 图片
    handleCancel = () => this.setState({ previewVisible: false })
    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }
    render(){
        const { mode } = this.state;
        //表格
        const dataSource = [{
            key: '1',
            time: '2017-07-02 19:41:45',
            id: 'A04040404',
            content: '我更改了月嫂信息',
            people:'我'
        },{
            key: '2',
            time: '2017-07-02 19:41:45',
            id: 'A04040404',
            content: '我更改了月嫂信息我更改了月嫂信息我更改了月嫂信息',
            people:'我'
        }];
        const columns = [{
            title: '操作时间',
            dataIndex: 'time',
            key: 'time',
            width:'20%'
        }, {
            title: '月嫂编号',
            dataIndex: 'id',
            key: 'id',
            width:'20%'
        }, {
            title: '操作内容',
            dataIndex: 'content',
            key: 'content',
            render:(value)=>{
                return (
                    <div>
                        {
                            value.length > 16 ? <Tooltip placement="topLeft" title={value}><span>{value ? value.substr(0, 16) : ''}</span></Tooltip> : <span>{value}</span>
                        }
                    </div>
                )
            },
        }, {
            title: '操作人',
            dataIndex: 'people',
            key: 'people',
            width:'20%'
        }];
        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return(
            <div className="info-cont">
                <div className="slip-slide">
                    <ul>
                        <li className="active"><a href="#"><span>资料</span></a></li>
                        <li><a href="#"><span>日志</span></a></li>
                        <li><a href="#"><span>记录</span></a></li>
                    </ul>
                </div>
                <div className="slip-title">
                    <div className="slip-base">
                        <div className="slip-left">
                            <h4>月嫂详情</h4>
                        </div>
                        <div className="slip-right">
                            <ul>
                                <li>门店：成龙快婿家政公司</li>
                                <li>处理人：熊师虎</li>
                                <li>来源：熊师虎</li>
                                <li>创建时间：2017-05-31 18:19:19</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="slip-body">
                    {/*基本信息*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">基本信息</span>
                            <div className="state-cont">
                                <span className="state state-blue">兼职</span>
                                <span className="state state-green">待岗</span>
                                <span className="state state-orange">普通月嫂</span>
                                <span className="state state-red">正式</span>
                                <span className="state state-grey">灰色</span>
                            </div>
                            <div className="slip-bdt">
                                <Button type="primary">简历</Button>
                                <Button type="primary">编辑</Button>
                                <Button type="primary">放入黑名单</Button>
                                <Button type="primary">兼职</Button>
                                <Button type="danger">删除</Button>
                            </div>
                        </div>
                        <div className="slip-cont-b">
                            <div className="info-cont">
                                <Row>
                                    <Col span="8">
                                        <span className="span-left">月嫂姓名：</span>
                                        <span className="span-right">王园园</span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">服务地址：</span>
                                        <span className="span-right">
                                        <Tooltip  placement="topLeft" title="波奥大厦波奥大厦波奥大厦波奥大厦波奥大厦波奥大厦">波奥大厦</Tooltip>
                                        <a href="javascript:void(0)" className="scale-map" onClick={() => this.setModalMapVisible(true)}>查看地址</a>
                                    </span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">联系方式：</span>
                                        <div className="info-contact">
                                            <Tooltip placement="top" title="18061470286">
                                                <span className="phone-span"><MyIcon type="phone"/></span>
                                            </Tooltip>
                                            <Tooltip placement="top" title="201526288">
                                                <span className="phone-span"><MyIcon type="qq"/></span>
                                            </Tooltip>
                                        </div>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="8">
                                        <span className="span-left">服务类型：</span>
                                        <span className="span-right">月嫂测试</span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">服务费用：</span>
                                        <span className="span-right">5000元/月</span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">服务内容：</span>
                                        <span className="span-right">
                                        <Tooltip  placement="topLeft" title="催乳、月子餐、产后恢复催乳、月子餐、产后恢复">催乳、月子餐、产后恢复</Tooltip>
                                    </span>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="8">
                                        <span className="span-left">服务天数：</span>
                                        <span className="span-right">42</span>
                                    </Col>
                                    <Col span="8">
                                        <span className="span-left">服务天数：</span>
                                        <span className="span-right">
                                            <Tag>Tag 1</Tag>
                                        </span>
                                    </Col>
                                    <Col span="8"></Col>
                                </Row>
                                <div className="border-top">
                                    <Row>
                                        <Col span="8">
                                            <span className="span-left">用工时间：</span>
                                            <span className="span-right">2017-05-31</span>
                                        </Col>
                                        <Col span="16">
                                            <span className="span-left">其他要求：</span>
                                            <span className="span-right">
                                            <Tooltip  placement="topLeft" title="hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh">客户要一个年轻一点的月嫂，可能要做月子餐</Tooltip>
                                        </span>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*月嫂认证记录*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">月嫂认证记录</span>
                        </div>
                        <div className="slip-cont-b">
                            {/*搜索*/}
                            <div className="search-cont">
                                <Row gutter={16}>
                                    <Col span="5">
                                        <RangePicker  size="large"/>
                                    </Col>
                                    <Col span="5">
                                        <Input placeholder="请输入操作人姓名" size="large" />
                                    </Col>
                                    <Col span="2">
                                        <Button size="large" type="primary">搜索</Button>
                                    </Col>
                                </Row>
                            </div>
                            {/*table*/}
                            <Table dataSource={dataSource} columns={columns} bordered />
                        </div>
                    </div>
                    {/*沟通记录*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">沟通记录</span>
                            <div className="slip-bdt">
                                <Button type="primary">添加</Button>
                            </div>
                        </div>
                        <div className="slip-cont-b">
                            <Timeline pending={<span className="col-grey">没有了...</span>}>
                                <Timeline.Item>
                                    <div className="gtjl-log-time">
                                        <h4>2017年07月12日</h4>
                                    </div>
                                    <div className="gtjl-log-cont">
                                        <Row gutter={16}>
                                            <Col span={3}>姓名：</Col>
                                            <Col span={21}>
                                                <a href="#" className="col-blue name">月嫂名字</a>
                                                <span className="col-grey">订单编号：JZ23400302</span>
                                            </Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>时间：</Col>
                                            <Col span={21}><Icon type="calendar" />2016-08-01 16:06:04</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>沟通人：</Col>
                                            <Col span={21}>小金鱼</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>公司：</Col>
                                            <Col span={21}>小金鱼家政公司</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>评价：</Col>
                                            <Col span={21}>
                                                面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好， 没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔
                                            </Col>
                                        </Row>
                                    </div>
                                </Timeline.Item>
                                <Timeline.Item>
                                    <div className="gtjl-log-time">
                                        <h4>2017年07月12日</h4>
                                    </div>
                                    <div className="gtjl-log-cont">
                                        <Row gutter={16}>
                                            <Col span={3}>姓名：</Col>
                                            <Col span={21}>
                                                <a href="#" className="col-blue name">月嫂名字</a>
                                                <span className="col-grey">订单编号：JZ23400302</span>
                                            </Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>时间：</Col>
                                            <Col span={21}><Icon type="calendar" />2016-08-01 16:06:04</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>沟通人：</Col>
                                            <Col span={21}>小金鱼</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>公司：</Col>
                                            <Col span={21}>小金鱼家政公司</Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={3}>评价：</Col>
                                            <Col span={21}>
                                                面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好， 没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔
                                            </Col>
                                        </Row>
                                    </div>
                                </Timeline.Item>
                            </Timeline>
                        </div>
                    </div>
                    {/*从业经历*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">从业经历</span>
                        </div>
                        <div className="slip-cont-b">

                        </div>
                    </div>
                    {/*评价*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">评价</span>
                        </div>
                        <div className="slip-cont-b">
                            <Row>
                                <Col span="24">
                                    <span className="span-left">月嫂姓名：</span>
                                    <span className="span-right">普通哎呀</span>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <span className="span-left">月嫂评价：</span>
                                    <span className="span-right">这个月嫂评价非常不错!这个月嫂评价非
                                        常不错!这个月嫂评价非常不错!这个月嫂评价非常不错!这个月嫂评价非
                                        常不错!这个月嫂评价非常不错!这个月嫂评价非常不错!</span>
                                </Col>
                            </Row>
                        </div>
                    </div>
                    {/*图片信息*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">图片信息</span>
                        </div>
                        <div className="slip-cont-b">
                            {/*图片纯展示状态才加right-info-pic这个div*/}
                           <ImageList data={Immutable.fromJS([{url:"http://img4.imgtn.bdimg.com/it/u=2440916856,3596786042&fm=200&gp=0.jpg",title:"呵呵哒"},{url:"http://img1.imgtn.bdimg.com/it/u=3543171430,695164887&fm=26&gp=0.jpg",title:"嘿嘿"}])} />
                        </div>
                    </div>
                    {/*视频信息*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">视频信息</span>
                        </div>
                        <div className="slip-cont-b">
                            {/*视频纯展示状态才加right-info-video这个div*/}
                            <div className="right-info-pic-info right-info-video-info">
                                <div className="clearfix">
                                    <div className="ant-upload-list ant-upload-list-picture-card">
                                        <div className="ant-upload-list-item ant-upload-list-item-done">
                                            <div className="ant-upload-list-item-info">
                                                <a className="ant-upload-list-item-thumbnail">
                                                    <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="生活照" />
                                                </a>
                                                <span className="ant-upload-list-item-name" title="视频信息">视频信息</span>
                                            </div>
                                            <span className="ant-upload-list-item-actions" onClick={() => this.showModalvideo(true)}>
                                                <a title="预览文件"><i className="anticon anticon-play-circle-o"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <Modal
                                    title="视频预览"
                                    wrapClassName="vertical-center-modal"
                                    visible={this.state.Modalvideo}
                                    onCancel={() => this.showModalvideo(false)}
                                    footer={null}
                                >
                                    <video className="video" width='100%' height='100%' controls="controls" src="http://movie.qianmi.com/c77f3875-be2b-4634-928e-73e51ec4d788.mp4"></video>
                                </Modal>
                            </div>
                        </div>
                    </div>
                    {/*为空状态*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">评价</span>
                        </div>
                        <div className="slip-cont-b">
                            <div className="empty">
                                <h4>
                                    <MyIcon type="empty"/>
                                    无*****
                                </h4>
                                <p>点击<a className="btn-link">****</a>添加</p>
                            </div>
                        </div>
                    </div>
                    {/*所有专业*/}
                    <div className="slip-cont">
                        <div className="slip-cont-title">
                            <span className="span-bdw">所有专业</span>
                        </div>
                        <div className="slip-cont-b">
                            <Tabs type="card">
                                <TabPane tab="高级育儿嫂专业" key="1">
                                    <Tabs defaultActiveKey="1_1">
                                        <TabPane tab="签到记录" key="1_1">Content of Tab Pane 1</TabPane>
                                        <TabPane tab="考评记录" key="1_2">Content of Tab Pane 2</TabPane>
                                        <TabPane tab="领证记录" key="1_3">Content of Tab Pane 3</TabPane>
                                    </Tabs>
                                </TabPane>
                                <TabPane tab="高级月嫂专业" key="2">
                                    <Tabs defaultActiveKey="2_1">
                                        <TabPane tab="签到记录2" key="2_1">Content of Tab Pane 1</TabPane>
                                        <TabPane tab="考评记录2" key="2_2">Content of Tab Pane 2</TabPane>
                                        <TabPane tab="领证记录2" key="2_3">Content of Tab Pane 3</TabPane>
                                    </Tabs>
                                </TabPane>
                            </Tabs>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}